<!-- components/OjContainer.vue: 页面布局组件 -->
<template>
  <div class="oj-container">
    <el-container>
      <!-- 页头: 跳转路由 -->
      <el-header>
        <nav>
          <router-link to="/">Home</router-link>
          |
          <router-link to="/topics">Topics</router-link>
          |
          <router-link to="/discussion">Discussion</router-link>
          |
          <router-link to="/learning">Learning</router-link>
          |
          <router-link to="/setting">Setting</router-link>
          |
          <router-link to="/about">About</router-link>
        </nav>
      </el-header>
      <el-container>
        <!-- 左侧边栏: 根据 showLeftAside 属性决定是否显示 -->
        <el-aside v-if="showLeftAside">
          <slot name="left-aside">left-aside</slot>
        </el-aside>
        <!-- 页面内容 -->
        <el-main>
          <slot name="main">main</slot>
        </el-main>
        <!-- 右侧边栏: 根据 showRightAside 属性决定是否显示 -->
        <el-aside v-if="showRightAside">
          <slot name="right-aside">right-aside</slot>
        </el-aside>
      </el-container>
      <!-- 页尾: 备案信息 -->
      <el-footer>
        <p>备案号: IPX-xxxxxx | 制作者: limou3434 | 邮箱: 898738804@qq.com</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'OjContainer',
  props: {
    showLeftAside: {
      type: Boolean,
      default: true,
    },
    showRightAside: {
      type: Boolean,
      default: true,
    },
  },
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>
